<script setup>
import {ArrowLeftBold} from "@element-plus/icons-vue";
import {useStudentStore} from "../stores/student.js";
import { useRoute } from 'vue-router';
import router from '@/router'
import { exam } from '@/stores/exam';
import { ref} from "vue";
const examStore = exam();
const route = useRoute();

const user =ref({
   student:{}
})
let student = useStudentStore();
user.value.student = student.studentInfo

const isActive = path =>{
  path = path.replace("/", "")
  let arr = route.path.split("/");
  for (let url of arr) {
    if(url === path){
      return true
    }
  }
  return false
}

//退出登录
function logout(){
  useStudentStore().clearStudentInfo()
  localStorage.removeItem("frontToken"); //清除本地存储的学生信息
  router.push("/login");
}
</script>

<template>
  <div class="header">
    <div v-if="route.path == '/createExam'" class="header-container container">
      <div class="go-back">
        <el-button  :icon="ArrowLeftBold" plain type="info" @click="router.go(-1)">返回</el-button>
      </div>
      <div class="title">{{ examStore.examInformation.examName }}</div>
    </div>
    <div v-else class="header-container">
      <div class="header-item">
        <img class="logo" src="https://cms.pixso.cn/images/px-logo.png" alt="logo">
      </div>
      <div class="header-item" :class="{'header-active': isActive('/index')}" @click="$router.push('/index')">
        <el-icon style="vertical-align: middle">
          <House/>
        </el-icon>
        首页
      </div>
      <div class="header-item" :class="{'header-active': isActive('/course')}"  @click="$router.push('/course')">
        <el-icon style="vertical-align: middle">
          <Reading/>
        </el-icon>
        课程
      </div>
      <div class="header-item" :class="{'header-active': isActive('/questionBank')}"  @click="$router.push('/questionBank')">
        <el-icon style="vertical-align: middle">
          <Coin/>
        </el-icon>
        题库
      </div>
      <div class="header-item"  :class="{'header-active': isActive('/exam')}"  @click="$router.push('/exam')">
        <el-icon style="vertical-align: middle">
          <Clock/>
        </el-icon>
        考试
      </div>
      <el-dropdown class="dropdown">
        <span class="header-item">
          <!-- <img class="avatar" :src="user.student.avatar" alt=""> -->
          <el-avatar shape="square" :src="user.student.avatar" />
          {{ user.student.name }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/personal/info')"><el-icon><User/></el-icon>个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout()"><el-icon><SwitchButton /></el-icon>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #BBBBBB;
}

.header-container {
  flex: 1;
  max-width: 1100px;
  min-width: 800px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70px;
}

.header-item{
  display: flex;
  flex-basis: auto;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 3px solid white;
  font-size: 14px;
}

.header-item:focus {
  outline: none;
}

.header-active{
  border-bottom: 3px solid #007bff !important;
  color: #007bff;
}

.header-item:first-child, .header-item:last-child{
  border-bottom: 0 !important;
}

.header-item:not(:last-child):not(:first-child):hover {
  color: #007bff;
}

.header-item:first-child:hover, .header-item:last-child:hover {
  background-color: #f7f7f7;
}

.logo {
  height: 40px;
}

.avatar {
  height: 40px;
}
.container{
  justify-content: start;
  max-width: 1300px;
}
.go-back{
  font-size: 14px;
}
.title{
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
</style>
